"use strict";
const ulist = document.querySelector('.ulist');
const olist = document.querySelector('.olist');
Ajax('/api/data', (res) => {
    render(res.data);
});
const render = (data) => {
    ulist.innerHTML = data.map((v, i) => {
        return `  <li class="${i === 0 ? 'active' : ''}"><b>${v.title}</b></li>`;
    }).join('');
    olist.innerHTML = data.map((v, i) => {
        return v.children.map((item, index) => {
            return `
      <li class="${i === 0 ? 'active' : ''}">
      <dl>
      <dt><img src="${item.img}" alt="" /> </dt>
      <dd>${item.title}</dd>
      </dl>
      </li>
      `;
        }).join('');
    }).join('');
    Bint();
};
const Bint = () => {
    const lis = Array.from(document.querySelectorAll('.ulist li'));
    lis.forEach((v, i) => {
        v.addEventListener('click', () => {
            var _a, _b;
            (_a = document.querySelector('.ulist .active')) === null || _a === void 0 ? void 0 : _a.classList.remove('active');
            v.classList.add('active');
            (_b = document.querySelector('.olist .active')) === null || _b === void 0 ? void 0 : _b.classList.remove('active');
            olist === null || olist === void 0 ? void 0 : olist.children[i].classList.add('active');
        });
    });
};
